refactor(file-browser): Granular item rendering and programmatic DOM list construction - #2723

📌 Context & Motivation

Per #2500 (comment) regarding PR size and review complexity, this PR extracts the foundational DOM rendering refactor into a dedicated, self-contained pull request.

PR #2500 introduces navigation state management, skeleton UI feedback, and async safety routines. However, those additions directly depend on having granular DOM node control rather than compiling monolithic list templates. By isolating template scope reduction and DOM helper construction into this PR, we simplify code review and preserve Git history continuity before layering async navigation logic on top.

🛠️ Summary of Changes

This PR refactors directory list rendering in the file browser away from full-list Mustache template compilation into modular item construction helpers and programmatic DOM loops.

1. Continuous Git History Preservation

• src/pages/fileBrowser/list.hbs ➔ src/pages/fileBrowser/listItem.hbs: Isolated the file system rename operation into its own dedicated commit with zero content alterations. This ensures Git records a 100% similarity score, preserving continuous git blame and file history tracking across structural updates.

2. Template Scope Granularity (listItem.hbs)

• Stripped the outer <ul class="list" id="list"> wrapper element and the surrounding {{#list}}...{{/list}} iteration tag from the Handlebars template.
• Converted the file into a standalone row partial that accepts an entry object and renders a single <li> element representing an individual file or directory item.

3. DOM Construction Helpers (fileBrowser.js)

Implemented explicit helper utilities in fileBrowser.js to modularize node creation:

• createListEl(): Generates and returns the parent <ul className="list" id="list"> container.
• createListItemEl(obj): Renders item data via mustache.render(_listItem, obj) and parses the output into an HTMLLIElement node.
• createPlaceholderEl(msg): Programmatically constructs dedicated empty-state nodes (<div id="placeholder">{msg}</div>).

4. Render Loop & Restored Empty State (fileBrowser.js)

• Updated render(dir) to instantiate list containers programmatically and append rendered child elements via standard DOM iteration ($list.appendChild(el)).
• Empty Directory Support: Previously, empty directory placeholders were managed via Mustache's built-in empty-msg attribute handling on the root list template. Under the new item-level workflow, explicit empty check logic was added: when list.length is zero, createPlaceholderEl(msg) appends the localized empty message element directly to the container.

5. Layout Alignment (fileBrowser.scss)

• Defined CSS rules for #placeholder using Flexbox (display: flex, align-items: center, justify-content: center) to guarantee empty directory placeholder messages are centered vertically and horizontally within the file browser body.

🔍 Why Is This Refactor Necessary?

1. Dependency for PR refactor(file-browser): Overhaul navigation state, skeleton rendering, and async safety  #2500: The PR requires direct, individual references to list item nodes and empty placeholder elements to implement skeleton loading states, transition effects_{(not yet implemented)}, and async state safety.
2. Modular Architecture: Decoupling container generation from row template parsing eliminates full-template re-renders and provides granular control over dynamic DOM updates.
3. Review Efficiency: Splitting this structural change into its own PR fulfills review guidelines by separating DOM manipulation updates from async navigation logic.

_{(PR name and description are AI generated (Gemini 3.6 Flash))}